<template>
    <div class="home">
        <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="评分项目" left-arrow
            @click-left="$router.go(-1)" />
        <div class="allScore">
            <div class="scoreList">
                <div class="scoreItem" v-for="(item, index) in makeList" :key="item.scoreProjectId">
                    <div class="itemTops">
                        <div :class="[item.status !== 2?'status1':'status2', 'statusInfo']">
                            {{item.status !== 2?'待打分':'已提交'}}
                        </div>
                        <p class="itemTit">
                            {{item.projectName}}
                        </p>
                        <p class="itemTxt">
                            {{item.tickName}}
                        </p>
                        <p class="itemTxt">
                            {{ item.sponsorName }}
                        </p>
                    </div>
<!-- v-if="item.status == 0" -->
                    <div class="itemBtn statusBtn1" >
                        <van-button style="width:49%;height:6vh;border-radius:.15rem"
                            color="linear-gradient(to right, #5c79f7, #5c74f4)" @click="toBoard(item)">分数列表</van-button>
                        <van-button style="width:49%;height:6vh;border-radius:.15rem"
                            color="linear-gradient(to right, #b267f4, #6953f7)" @click="toMakeScore(item)">前往打分</van-button>
                    </div>
                    <!-- <div class="itemBtn statusBtn2" v-if="item.status == 2">
                        <van-button style="width:100%;border-radius:.1rem" @click="toBoard(item)"
                            color="#2e2e46">分数列表</van-button>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>

import {
  judgeScoreProject,
  scoreRecordSignal,
  scoreRecordMultiple,
} from "@/apis/score";

export default {
    data() {
        return {
            makeList: [],
            limitQuery: {
                pageSize: 10,
                pageNumber: 1,
            },
        }
    },
    methods: {
        toBoard(item) {
            
            this.$router.push({
                path: '/scoring/scoreList',
                query: {
                    id: item.scoreProjectId
                }
            })
        },
        async toMakeScore(item) {
            const {result} = await judgeScoreProject(item.scoreProjectId);
            if(result.modelType===0){
                
            this.$router.push({
                path: '/scoring/makeScore',
                query: {
                    id: item.scoreProjectId
                }
            })
            }else{
            this.$router.push({
                path: '/scoring/makeScoreMultiple',
                query: {
                    id: item.scoreProjectId
                }
            })
            }
        },
        toScoreList() {
            this.$router.push({
                path: '/scoring/makeScore',
                query: {
                }
            })
        }
    },
    mounted() {
        this.$axios.get(`score/judgeScoreProject?pageSize=${this.limitQuery.pageSize}&pageNumber=${this.limitQuery.pageNumber}`).then((res) => {
            
            this.makeList = res.result.data
            console.log(this.makeList)
        });
    }
}
</script>
  
<style lang="less" scoped>
.home {
    color: #fff;
    font-size: .3rem;
    padding: .25rem;
}

.topScore {
    background: #363650;
    padding: .2rem .3rem;
    border-radius: .2rem;
    border: 1px solid #434263;

    .topTit {
        display: flex;
        justify-content: space-between;
        margin-bottom: .1rem;

        .noCach {
            width: .5rem;
            height: .5rem;
            text-align: center;
            line-height: .5rem;
            border-radius: .2rem;
            background: #3e3f5c;
        }
    }

    .middScore {
        font-size: .25rem;
        line-height: .45rem;
        margin-bottom: .3rem;
    }

    .botScore {
        display: flex;
        justify-content: space-between;
        font-size: .25rem;
    }
}

.scoreList {
    .scoreItem {
        background: #363650;
        border-radius: .2rem;
        position: relative;
        overflow: hidden;

        .itemTops {
            padding: .4rem .3rem .3rem;

            .statusInfo {
                color: rgba(255, 255, 255, .6);
                position: absolute;
                padding: .1rem;
                font-size: .23rem;
                border-radius: .02rem .2rem .02rem .2rem;
                top: 0;
                right: 0;
            }

            .status2 {
                background: #347772;
            }

            .status1 {
                background: #5954f8;
            }

            .itemTit {
                margin-bottom: .25rem;
            }

            .itemTxt {
                margin-bottom: .1rem;
                font-size: .25rem;
                color: #a2a2bc;
            }
        }

        .itemBtn {
            background: #232136;
            width: 100%;
            padding: .2rem;

        }
    }

    .homeBtn {
        background: #27283d;
        height: 12vh;
        padding: 0 .2rem;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .statusBtn1 {
        display: flex;
        justify-content: space-between;

        ::v-deep .van-button {
            color: #fff !important
        }
    }

    .statusBtn2 {
        ::v-deep .van-button {
            color: #4682d2 !important
        }
    }
}

::v-deep .van-tabs__nav {
    background: #1e1e35;
}

::v-deep .van-tab {
    color: #fff;
}

::v-deep .van-tabs__line {
    background: #fff;
    width: .4rem;
}
</style>